<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>电池图标</title>
    <link href="BatteryIconStyle.css" rel="stylesheet" />
    <script src="BatteryIconScript.js"></script>
    <style>
        body {
            text-align: center
        }

        .batteryIcon {
            margin: 200px auto;
            width: 90px;
        }

        span {
            display: block;
        }

        .batteryIconBody {
            position: relative;
            width: 80px;
            height: 30px;
            border: 6px solid #333;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
        }

        .batteryIconHead {
            position: relative;
            height: 15px;
            width: 8px;
            background: #333;
            display: block;
            position: absolute;
            top: 8px;
            left: 82px;
        }

        .batteryIconProgress {
            height: 30px;
        }

        .batteryIconContent {
            position: relative;
            font-size: 12px;
            left: 4px;
            top: -22px;
        }

        .beginButton {
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="batteryIcon">
        <span class="batteryIconBody">
            <span id="batteryIconProgress" class="batteryIconProgress"></span>
            <label class="batteryIconContent" id="batteryIconContent"></label>
            <span class="batteryIconHead"></span>
        </span>
    </div>
</body>
<script>
    //窗体加载
    // window.onload = function () {
    //     setInterval("testBegin(0);", 5000);
    // }
    //测试开始
    // function testBegin(val) {
    //     var bcontent = document.getElementById("batteryIconProgress");
    //     var label = document.getElementById("batteryIconContent");
    //     for (var i = val; i <= 100; i++) {
    //         bcontent.style.setProperty('width', '' + 80 * i / 100 + '');
    //         if (i <= 10) {
    //             bcontent.style.setProperty('background', '#ff0000');
    //         }
    //         if (i > 10) {
    //             bcontent.style.setProperty('background', '#ffd800');
    //         }
    //         if (i > 50) {
    //             bcontent.style.setProperty('background', '#00ff21');
    //         }
    //         label.innerText = ((i) + "%");
    //         window.setTimeout("testBegin(" + ++i + ")", 200)
    //         break;
    //     }
    // }
    let fileSize = '89563.46KB'
    const total = Math.ceil(fileSize/(1024*1024))
    console.log(total)
</script>

</html>